<template>
  <img v-if="type==='url'" :src="src" v-bind="$attrs">
  <svg v-else-if="type==='local'" class="icon" :style="fontStyle" aria-hidden="true" v-bind="$attrs">
    <use :xlink:href="iconName"></use>
  </svg>
  <el-icon v-else :size="size" v-bind="$attrs">
    <component :is="name"></component>
  </el-icon>
</template>

<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
// 声明额外的选项
export default {
  name: 'SvgIcon'
}
</script>

<script setup>
// import {defineComponent, ref, reactive, getCurrentInstance, onMounted} from 'vue'
// import {useRouter, useRoute} from 'vue-router'
// import {useStore} from 'vuex'
import {defineProps, ref, computed} from 'vue'
import {oneOf} from './utils'
const props = defineProps({
  type: {
    type: String,
    default: 'local',
    validator(value) {
      return oneOf(value, ['local', 'elementPlus', 'url']);
    }
  },
  name: {
    type: String,
    default: null
  },
  src: {
    type: String,
    default: null
  },
  size: {
    type: Number,
    default: 16
  }
})

const iconNameProp = ref(props.name)
const size = ref(props.size)
const fontStyle = computed(() => {
  if (size.value) {
    return {
      'font-size': size.value + 'px'
    }
  } else {
    return null
  }
})
const iconName = computed(() => {
  return `#icon-${iconNameProp.value}`
})
const src = ref(props.src)
</script>

<style scoped lang="sass">
.icon
  width: 1em
  height: 1em
  vertical-align: -0.15em
  fill: currentColor
  overflow: hidden
</style>
